<template>
  <div class="content">
    <div class="top flex-between">
      <div class="main-wrap left">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">目标统计</div>
          </div>
          <div class="right flex-center">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
            <div class="time flex-start">
              <el-select
                size="mini"
                v-model="source1"
                placeholder="请选择"
                @change="changeSource1"
                clearable
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
            <div class="time flex-start" style="margin-left: 1rem">
              <div
                v-for="item in timeTabsTarget"
                :key="item.name"
                class="tab flex-center"
                :class="[timeChoosedTarget == item.id ? 'active' : '']"
                @click="changeTimeTabsTarget(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="chart-con flex-center">
          <div class="tree-con">
            <div class="search-wrap">
              <div class="search">
                <div class="icon-search"></div>
                <el-input
                  size="mini"
                  placeholder="搜索"
                  v-model="filterText"
                  maxlength="100"
                >
                </el-input>
              </div>
              <el-button
                type="primary"
                class="inputSearchBtn"
                size="mini"
                @click="confirmFilterTextFn"
                >搜索</el-button
              >
            </div>
            <el-tree
              ref="elTree"
              :data="dataTree"
              show-checkbox
              node-key="zbnm"
              :default-checked-keys="defaultCheckedKeys"
              :props="defaultProps"
              @check="checkChange"
              :filter-node-method="filterNode"
            >
                <div class="custom-tree-node" slot-scope="{ node }" :title="node.label">
                    {{ ellipsis(node , 15)}}
                </div>
            </el-tree>
          </div>
          <div class="chart-wrap">
            <straightLineChart
              :xAxis="straightLineChartData.xAxis"
              :value="straightLineChartData.value"
              :legend="straightLineChartData.legend"
              :checkedName="checkedName"
            />
          </div>
        </div>
      </div>
      <div class="main-wrap right">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">属性统计</div>
          </div>
          <div class="right flex-center-column">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
          </div>
        </div>
        <div class="chart-con">
          <tagPieChart
            :legend="tagPieChartData.legend"
            :value="tagPieChartData.value"
          />
        </div>
        <div class="btn-con flex-center">
          <div
            class="btn flex-center"
            :class="[choosedPropertyBtns == item.id ? 'active' : '']"
            v-for="item in propertyBtns"
            :key="item.id"
            @click="handleProperty(item.id)"
          >
            <span class="dot"></span>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom flex-between">
      <div class="main-wrap left">
        <div class="title-con flex-between title-con-other">
          <div class="title-con-left-item">
            <div class="left flex-center">
              <div class="icon"></div>
              <div class="tit">工作量统计</div>
            </div>
            <div class="right flex-center-column title-con-left-item-right">
              <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
              <div class="time time-job flex-center">
                <div
                  v-for="item in timeTabs"
                  :key="item.name"
                  class="tab flex-center"
                  :class="[timeChoosed == item.id ? 'active' : '']"
                  @click="changeTimeTabs(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="title-con-right-item">
            <div class="left flex-center title-con-right-item-left">
              <div class="icon"></div>
              <div class="tit">用户统计</div>
            </div>
          </div>
        </div>
        <div class="chart-con flex-center">
          <lineChart
            width="50%"
            :xAxis="lineChartData.xAxis"
            :value="lineChartData.value"
            :legend="lineChartData.legend"
          />
          <barChart
            width="50%"
            :xAxis="barChartData.xAxis"
            :value="barChartData.value"
            :legend="barChartData.legend"
          ></barChart>
        </div>
      </div>
      <div class="main-wrap right">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">标签统计</div>
          </div>
          <div class="right flex-center-column">
            <!-- <div class="btn flex-center">
              <div class="icon"></div>
              <span>导出</span>
            </div> -->
          </div>
        </div>
        <div class="chart-con">
          <tagPieChart
            :legend="tagPieChartData2.legend"
            :value="tagPieChartData2.value"
          />
        </div>
        <div class="btn-con flex-center">
          <div
            class="btn flex-center"
            v-for="item in tagBtns"
            :key="item.id"
            :class="[choosedTagBtns == item.id ? 'active' : '']"
            @click="handleProperty2(item.id)"
          >
            <span class="dot"></span>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import straightLineChart from "@/components/dataStatistics/straightLineChart.vue";
import barChart from "@/components/dataStatistics/barChart.vue";
import tagPieChart from "@/components/dataStatistics/tagPieChart.vue";
import lineChart from "@/components/dataStatistics/lineChart.vue";
export default {
  components: {
    straightLineChart,
    barChart,
    // typePie,
    tagPieChart,
    lineChart,
  },
  computed: {
    ...mapState({
      /* dataTree(state) {
        return state.app.targetTreeData;
      }, */
    }),
  },
  data() {
    return {
      clickTreeParentItem: null, //是否点击的是树的父盒子
      source1: "",
      sourceList: [],
      filterText: "", // 目标搜索/
      dataTree: [],
      defaultProps: {
        children: "childrenTarget",
        label: "mc",
      },
      timeChoosedTarget: "dayDatas",
      timeTabsTarget: [
        {
          id: "dayDatas",
          name: "日",
        },
        {
          id: "monthDatas",
          name: "月",
        },
        {
          id: "yearDatas",
          name: "年",
        },
      ],
      timeChoosed: "dayDatas",
      timeTabs: [
        {
          id: "dayDatas",
          name: "日",
        },
        {
          id: "monthDatas",
          name: "月",
        },
        {
          id: "yearDatas",
          name: "年",
        },
      ],
      choosedPropertyBtns: null,
      propertyBtns: [
        // {
        //   id: 1,
        //   name: "采集单位",
        // },
        // {
        //   id: 2,
        //   name: "目标所在区域",
        // },
        // {
        //   id: 3,
        //   name: "真照部位",
        // },
        // {
        //   id: 4,
        //   name: "方位",
        // },
      ],
      choosedTagBtns: null,
      tagBtns: [],
      lineChartOriginData: {},
      lineChartData: {
        xAxis: [],
        value: [],
        legend: [],
      },
      straightLineChartOriginData: {},
      straightLineChartData: {
        xAxis: [],
        value: [],
        legend: [],
      },
      barChartData: {
        xAxis: [],
        value: [],
      },
      tagPieChartData: {
        legend: [],
        value: [],
      },
      tagPieChartData2: {
        legend: [],
        value: [],
      },
      typePieData: [],
      options: [],
      value: "",

      fatherIds: [],
      chekedIds: [], //  单选tree
      categoryIds: [],
      defaultCheckedKeys: [],

      checkedKeys: [], // 选中目标ID
      checkedName: "",
    };
  },
  watch: {
    filterText(val) {
      if (!val) {
        this.$refs.elTree.filter(val);
      }
    },
    checkedName() {
      this.targetStatistics();
    },
    /* source1() {
      this.targetStatistics();
    }, */
  },
  created() {
    this.getSourceList();
    this.findAllTarget();
    // 数据统计 根据时间进行统计  折线图
    this.timeStatistics();
    // 数据统计 根据目标进行统计  折线图
    // 数据统计 根据标签组进行统计
    // this.labelStatistics();
    // 数据统计 类别统计
    this.queryTypeStatistics();
    // 数据统计 工作量统计
    // this.queryWorkStatistics();
    // 数据统计 根据类型,获取标签组
    this.getLabelGroupByType();
    this.userStatistics();
  },
  methods: {
    ellipsis(node,len){
        if(node.label.length > len){
            return node.label.slice(0,len) + "" + "..."
        }else{
            return node.label
        }
    },
    changeSource1() {
      this.targetStatistics();
    },
    async getSourceList() {
      let data = await this.$api.getSourceList();
      this.sourceList = data;
      if (data.length > 0) {
        data.forEach((item) => {
          if (item.defaultValue == 1) {
            this.source1 = item.name;
          }
        });
      }
    },
    filterNode(value, dataTree) {
      if (!value) return true;
      return dataTree.mc.indexOf(value) !== -1;
    },
    // 属性
    async handleProperty(id) {
      this.choosedPropertyBtns = id;
      let data = await this.$api.getGroupLableStatistics({ groupId: id });
      this.tagPieChartData.legend = data.map((item) => {
        return item.labelName;
      });
      this.tagPieChartData.value = data.map((item) => {
        return { value: item.NUMBER, name: item.labelName };
      });
    },
    // bottom 饼图
    async handleProperty2(id) {
      this.choosedTagBtns = id;
      let data = await this.$api.getGroupLableStatistics({ groupId: id });
      this.tagPieChartData2.legend = data.map((item) => {
        return item.labelName;
      });
      this.tagPieChartData2.value = data.map((item) => {
        return { value: item.NUMBER, name: item.labelName };
      });
    },
    getLabelGroupByType() {
      //当前标签组的类型 0.是标签统计， 1.是属性统计
      this.$api
        .getLabelGroupByType({
          type: 1,
        })
        .then((res) => {
          this.propertyBtns = res;
          this.choosedPropertyBtns = res[0].id;
          this.handleProperty(res[0].id);
        });
      this.$api
        .getLabelGroupByType({
          type: 0,
        })
        .then((res) => {
          this.tagBtns = res;
          this.choosedTagBtns = res[0].id;
          this.handleProperty2(res[0].id);
        });
    },
    async findAllTarget() {
      this.dataTree = await this.$api.newTargetFindAllByTree();
      console.log(this.dataTree);
      this.defaultCheckedKeys = [this.dataTree[0].zbnm];
      this.checkedKeys = [this.dataTree[0].zbnm];
      this.checkedName = this.dataTree[0].mc;
    },
    // 标签树单选-逻辑优化，
    /* treeCheck(data) {
      let sonId = data.id;
      let fatherId = data.groupId;
      if (this.fatherIds.indexOf(fatherId) == -1) {
        this.fatherIds.push(fatherId);
      }
      //chekedIds去重
      let chekedIds = this.chekedIds.filter((j) => j.father != fatherId);
      chekedIds.push({
        father: fatherId,
        son: sonId,
      });
      this.categoryIds = chekedIds.map((key) => key.son);
      // console.log(678, this.categoryIds, chekedIds);
      this.chekedIds = chekedIds;
      this.$refs.elTree.setCheckedKeys(this.categoryIds);
    }, */
    checkChange(data, checked) {
      if (checked) {
        this.checkedKeys = [data.zbnm];
        this.checkedName = data.mc;
        this.$nextTick(() => {
          this.$refs.elTree.setCheckedKeys([data.zbnm]);
        });
      }
    },
    // 数据遍历处理  点击 月周 切换
    changeTimeTabs(item) {
      this.timeChoosed = item.id;
      this.lineChartData.xAxis = this.lineChartOriginData[item.id].map(
        (item1) => {
          return item1.time;
        }
      )[0];
      this.lineChartData.legend = this.lineChartOriginData[item.id].map(
        (item2) => {
          return item2.type;
        }
      );
      this.lineChartData.value = this.lineChartOriginData[item.id].map(
        (item3) => {
          return item3.num;
        }
      );
    },
    changeTimeTabsTarget(item) {
      this.timeChoosedTarget = item.id;
      this.straightLineChartData.xAxis = this.straightLineChartOriginData[
        item.id
      ].map((item4) => {
        return item4.time;
      })[0];
      this.straightLineChartData.legend = this.straightLineChartOriginData[
        item.id
      ].map((item5) => {
        return item5.type;
      });
      this.straightLineChartData.value = this.straightLineChartOriginData[
        item.id
      ].map((item6) => {
        return item6.num;
      });
    },
    // 切换标签饼图
    tabTags(e) {
      this.$api.getGroupLableStatistics({ name: e }).then((res) => {
        this.tagPieChartData.legend = res.map((item) => {
          return item.labelName;
        });
        this.tagPieChartData.value = res.map((item) => {
          return { value: item.NUMBER, name: item.labelName };
        });
      });
    },
    // 获取标签组
    async findAllTags() {
      let data = await this.$api.findAllTags();
      this.options = data;
      this.value = data[0].name;
      this.$api.getGroupLableStatistics({ name: data[0].name }).then((res) => {
        this.tagPieChartData.legend = res.map((item) => {
          return item.labelName;
        });
        this.tagPieChartData.value = res.map((item) => {
          return { value: item.NUMBER, name: item.labelName };
        });
      });
    },
    // 圆滑折现图
    async timeStatistics() {
      let data = await this.$api.timeStatistics();
      this.lineChartOriginData = data;
      this.lineChartData.xAxis = data[this.timeChoosed].map((item) => {
        return item.time;
      })[0];
      this.lineChartData.legend = data[this.timeChoosed].map((item) => {
        return item.type;
      });
      this.lineChartData.value = data[this.timeChoosed].map((item) => {
        return item.num;
      });
    },
    async targetStatistics() {
      let data = await this.$api.targetStatistics({
        zbnm: this.checkedKeys[0],
        source: this.source1,
      });
      this.straightLineChartOriginData = data;
      this.straightLineChartData.xAxis = data[this.timeChoosedTarget].map(
        (item) => {
          return item.time;
        }
      )[0];
      this.straightLineChartData.legend = data[this.timeChoosedTarget].map(
        (item) => {
          return item.type;
        }
      );
      this.straightLineChartData.value = data[this.timeChoosedTarget].map(
        (item) => {
          return item.num;
        }
      );
    },
    // 饼状图数据 标签
    async labelStatistics() {
      let data = await this.$api.labelStatistics();
      this.tagPieChartData.legend = data.map((item) => {
        return item.typeName;
      });
      this.tagPieChartData.value = data.map((item) => {
        return { value: item.num, name: item.typeName };
      });
    },
    // 新 柱状图数据 userStatistics
    async userStatistics() {
      let data = await this.$api.userStatistics();
      this.barChartData.xAxis = data.xAxis;
      this.barChartData.value = data.value;
      this.barChartData.legend = data.legend;
    },
    // 饼状图数据 类别
    async queryTypeStatistics() {
      let data = await this.$api.sumStatistics();
      this.typePieData = data;
    },
    // 树形搜索变为点击搜索
    confirmFilterTextFn() {
      this.$refs.elTree.filter(this.filterText);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.content {
  margin: 0 auto;
  margin-bottom: 0.2rem;
  width: 18.5rem;
  // height: calc(100% - 0.76rem);
  overflow: auto;
  .top {
    margin-top: 0.2rem;
    .chart-wrap {
      width: 77.5%;
      height: 4.03rem;
    }
  }
  .main-wrap {
    position: relative;
    background: rgba(3, 69, 118, 0.5);
    &.left {
      width: 12.67rem;
      height: 4.8rem;
    }
    &.right {
      width: 5.6rem;
      height: 4.8rem;
    }
  }
  .chart-con {
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .btn-con {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    z-index: 100;
    .btn {
      cursor: pointer;
      margin: 0 0.06rem;
      font-size: 0.12rem;
      font-weight: 400;
      color: #ffffff;
      &.active {
        color: rgba(24, 144, 255, 1);
        .dot {
          background: rgba(24, 144, 255, 1);
        }
      }
      .dot {
        margin-right: 0.1rem;
        width: 0.08rem;
        height: 0.08rem;
        background: #ffffff;
        border-radius: 50%;
      }
    }
  }
  .title-con {
    margin-top: 0.1rem;
    padding: 0 0.2rem;
    height: 0.4rem;
    color: #ffffff;
    // overflow: auto;
    .left {
      .icon {
        width: 0.13rem;
        height: 0.2rem;
        background-image: url(~@/assets/images/group56@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .tit {
        margin-left: 0.1rem;
        font-size: 0.2rem;
        font-weight: bold;
        background: linear-gradient(0deg, #1890ff 0%, #95ccff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* margin-left: 0.15rem;
        width: 1.01rem;
        height: 0.2rem;
        background-image: url(~@/assets/images/workload_statistics@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        &.tit-pie {
          width: 0.8rem;
          height: 0.19rem;
          background-image: url(~@/assets/images/category_statistics@2x.png);
        }
        &.tit-bar {
          width: 1.01rem;
          height: 0.2rem;
          background-image: url(~@/assets/images/workload_statistics@2x.png);
        } */
      }
    }
    .right {
      ::v-deep.el-input__inner {
        height: 0.4rem;
        width: 1.6rem;
        background: #1890ff;
        border: 1px solid #1890ff;
        font-size: 0.14rem;
        color: #ffffff;
      }
      ::v-deep.el-input__suffix {
        height: 0.46rem;
      }
      .time {
        &time-job {
          margin-right: 6.4rem;
        }
        .tab {
          border: 0.01rem solid #62656c;
          width: 0.44rem;
          height: 0.26rem;
          border-radius: 0.02rem 0rem 0rem 0.02rem;
          &.active {
            background: #1890ff;
          }
        }
      }
      .btn {
        width: 0.84rem;
        height: 0.26rem;
        background: #1890ff;
        border-radius: 0.05rem;
      }
      .icon {
        margin-right: 0.1rem;
        width: 0.14rem;
        height: 0.14rem;
        background-image: url(~@/assets/images/export@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
    }
  }
  .bottom {
    margin-top: 0.2rem;
    overflow: hidden;
    height: 4.69rem;
    .bot-pie-wrap {
      height: 100%;
      width: 9.1rem;
      // background: #2f2f2f;
      background: rgba(3, 69, 118, 0.5);
    }
    .bot {
      .chart-con {
        width: 100%;
        height: 4rem;
      }
    }
  }
}
.tree-con {
  margin-left: 0.1rem;
  width: 22.5%;
  height: 4.03rem;
  background: rgba(21, 75, 122, 0.3);
  @include scrollBar;
  overflow-y: auto;
  ::v-deep .el-tree {
    overflow-y: auto;
    color: #cccccc;
    margin-top: 0.1rem;
    background: transparent;
    .el-tree__empty-text {
      display: none;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background: url(~@/assets/common/rectangle821.png) no-repeat; //背景色
      background-position: top;
      background-size: 100% 100%;
    }
    .el-tree-node__content {
      height: 0.5rem;
      &:hover {
        background: url(~@/assets/common/rectangle821.png) no-repeat; //背景色
        background-position: top;
        background-size: 100% 100%;
      }
    }
    .el-tree-node__label {
      font-size: 0.16rem;
      color: #cccccc;
      line-height: 0.25rem;
      letter-spacing: 1px;
    }
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    // .el-checkbox .el-checkbox__inner {
    //   display: none;
    // }
    .el-input__inner {
      width: 2rem;
    }
    // 文字超出换行
    .el-tree-node {
      white-space: normal;
      .el-tree-node__content {
        // height: 100%;
        height: auto;
        align-items: center;
      }
    }
    // 引导线
    // & > .el-tree-node:after {
    //   border-top: none;
    // }
    // .el-tree-node {
    //   position: relative;
    //   // padding-left: 16px;
    // }
    // //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    // // .el-tree-node__expand-icon.is-leaf {
    // //   display: none;
    // // }
    // .el-tree-node__children {
    //   padding-left: 16px;
    // }

    // .el-tree-node :last-child:before {
    //   height: 38px;
    // }

    // .el-tree > .el-tree-node:before {
    //   border-left: none;
    // }

    // .el-tree > .el-tree-node:after {
    //   border-top: none;
    // }

    // .el-tree-node:before {
    //   content: "";
    //   left: -4px;
    //   position: absolute;
    //   right: auto;
    //   border-width: 1px;
    // }

    // .el-tree-node:after {
    //   content: "";
    //   left: -4px;
    //   position: absolute;
    //   right: auto;
    //   border-width: 1px;
    // }

    // .el-tree-node:before {
    //   border-left: 1px solid #c0c4cc;
    //   bottom: 0px;
    //   height: 100%;
    //   top: -21px;
    //   width: 1px;
    // }

    // .el-tree-node__children {
    //   .el-tree-node:after {
    //     border-top: 1px solid #c0c4cc;
    //     height: 20px;
    //     top: 17px;
    //     width: 18px;
    //   }
    //   .el-tree-node__expand-icon.is-leaf {
    //     display: none;
    //   }
    // }
  }
  .search-wrap {
    width: 2.7rem;
    height: 0.34rem;
    margin: 0.06rem auto;
    display: flex;
    align-items: center;
  }
  .search {
    background: #034576;
    border-radius: 0.03rem;
    display: flex;
    margin-right: 5px;
    .icon-search {
      margin: 0.1rem 0.12rem;
      background-image: url(~@/assets/images/search@2x.png);
      flex: 0 0 0.14rem;
      width: 0.14rem;
      height: 0.15rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    ::v-deep .el-input {
      // height: 0.32rem;
      background: #034576;
      // margin: 0.02rem 0 0.01rem -0.12rem;
      font-size: 0.16rem;
      font-weight: 400;
      .el-input__inner {
        color: white !important;
        background: #034576;
        border: none;
        outline: none;
        padding: 0 8px;
      }
    }
  }
}
.title-con-other {
  display: flex;
  .title-con-left-item,
  .title-con-right-item {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-con-left-item-right {
      margin-right: 15px;
    }
    .title-con-right-item-left {
      margin-left: 10px;
    }
  }
}
</style>
